<template>
  <view class="firstPage">
    <!--自定义导航-->
    <view class="nav">
      <view class="top_title">
        <view class="blank"></view>
        <view class="title">火星地球人民医院</view>
      </view>
      <view class="imgBg">
        <image moade="aspectFill" src="https://diancan-1252107261.cos.accelerate.myqcloud.com/yiliao/nav-yiyu.png">
          alt="">
        </image>
      </view>
    </view>
    <!--疫苗预约-->
    <view class="coronavirus">
      <view class="coronavirus-tip" v-for="(vaccine,index) in Vaccines" :key="vaccine.title" @click="toVaccine(index)">
        <image :src="vaccine.image" mode="aspectFit"></image>
        <text>{{vaccine.title}}</text>
      </view>
    </view>
    <!-- 挂号体检 -->
    <view class="bodyCheck">
      <view class="bodycheck-item" v-for="(bodyCheck,index) in bodyCheckss" :key="bodyCheck.title"
        @click="switchTo(index)">
        <text class="body-checktitle">
          {{bodyCheck.title}}
        </text>
        <text class="bodycheck-describe">
          {{bodyCheck.describe}}
        </text>
        <image class="" :src="bodyCheck.image" mode="aspectFit">
        </image>
      </view>
    </view>
    <!-- 热门挂号 -->
    <view>
      <view class="online-nav">
        <text class="online-title">热门挂号</text>
        <view class="online-more">
          <view>更多</view>
          <image src="/static/other/gengduo.svg">
          </image>
        </view>
      </view>
      <view class="online-items">
        <view class="online-item" v-for="online in onlineData" :key="online.dep_id"
          :style="'background-color:'+online.background" @click="toApponment(online.dep_id)">
          <text>{{online.title}}</text>
          <image :src="online.image" mode="aspectFit">
          </image>
        </view>
      </view>
    </view>
    <!-- 健康自测 -->
    <view>
      <view class="online-nav">
        <text class="online-title">健康自测</text>
      </view>
      <view class="self_test" v-if="self_tests.length>0">
        <view class="test testTipone" v-for="(self , index)  in [self_tests[0]]" :key="self.name"
          @click="toTest(self.name,index,'001')">
          <view class="main">
            <view class="top">
              <text class="title">{{self.name}}</text>
              <text class="label">{{self.describe}}</text>
            </view>
            <view class="people">
              <text class="num">{{self.number_of_people}}</text>
              <text>人通过/{{self.question}}题/{{self.minute}}分钟</text>
            </view>
          </view>
          <image class="" :src="self.image" mode="aspectFit">
          </image>
        </view>
        <view class=" bodyOthertest">
          <view class="test testTip" v-for="(self,index) in self_tests.slice(1)" :key="self.name"
            @click="toTest(self.name,index,'002')">
            <view class="main">
              <view class="top">
                <text class="title">{{self.name}}</text>
                <view class="people">
                  <text>{{self.question}}题/{{self.minute}}分钟</text>
                </view>
              </view>
              <view class="people">
                <text class="num">{{self.number_of_people}}</text>
                <text>人通过</text>
              </view>
            </view>
            <image class="" :src="self.image" mode="aspectFit">
            </image>
          </view>

        </view>
      </view>

    </view>

  </view>
</template>
<script lang="ts" setup>
import {
  ref,
  onMounted,
} from "vue";
import RequestApi from "@/public/request";
import { Vaccine, bodyChecks, onlines, self_testHealth } from "@/public/decl-type";
//导航标题高度
const titleHight = ref<string>("");
// 胶囊距离顶部的高度
const blankHight = ref<string>("");
//预约疫苗数据
const Vaccines = ref<Vaccine[]>([]);
const bodyCheckss = ref<bodyChecks[]>([]);
const onlineData = ref<onlines[]>([])
const self_tests = ref<self_testHealth[]>([]);
const Uni = uni;//uni对象赋值给Uni
//跳转到相应健康自测页面
function toTest(title: string, index: number, type: string) {
  if (type == '001') {
    uni.navigateTo({
      url: '/pages/self_test/index?type=001&title=' + title
    })
  } else {
    if (index == 0) {
      uni.navigateTo({
        url: '/pages/self_test/index?type=002&title=' + title
      })
    } else {
      uni.navigateTo({
        url: '/pages/self_test/index?type=003&title=' + title
      })
    }
  }

}
//挂号体检路由跳转
function switchTo(index: number) {
  switch (index) {
    case 0:
      uni.switchTab({ url: '/pages/register/index' })
      break;
    case 1:
      uni.navigateTo({ url: '/pages/phyExam/index' })
      break;
  }

}
//新冠疫苗页面跳转
function toVaccine(index: number): void {
  switch (index) {
    case 0:
      Uni.navigateTo({
        url: "/pages/New_coronalVaccine/index"
      })
      break;
    case 1:
      Uni.navigateTo({
        url: "/pages/hpvAppointment/index"
      })
      break;
    case 2:
      Uni.navigateTo({
        url: "/pages/nucleic-acid/index"
      })
      break;
    case 3:
      Uni.navigateTo({
        url: "/pages/Inquiries/index"
      })
      break;
  }
}
//去相应科室挂号
function toApponment(id: string) {
  uni.navigateTo({
    url: '/pages/doctor/index?id=' + id
  })
}
//取出胶囊数据
function geuBtndata() {
  let btn = Uni.getStorageSync("menuButton");
  titleHight.value = btn.height + "px"; //胶囊距离顶部的
  blankHight.value = btn.top + "px";
}
async function getVaccines() {
  const res: any = await RequestApi.FrontPage();
  Vaccines.value = res.data.data[0].vaccine;
  bodyCheckss.value = res.data.data[1].reserve;
  onlineData.value = res.data.data[2].popular;
  self_tests.value = res.data.data[3].self_test;
}
onMounted(() => {
  geuBtndata();
  getVaccines();
});
</script>
<style lang="scss">
//自定义导航
.nav {
  .top_title {
    position: fixed;
    top: 0;
    left: 0;
  }

  .blank {
    height: v-bind("blankHight");
  }

  .title {
    height: v-bind("titleHight");
    line-height: v-bind("titleHight");
    padding-left: 20 rpx;
    color: #fff;
    font-weight: bold;
    font-size: 35 rpx;
  }

  .imgBg image {
    width: 100%;
    display: block;
    height: 550 rpx;
  }
}

// 疫苗预约
.coronavirus {
  display: flex;
  justify-content: space-between;
  margin: 40rpx 30rpx;

  .coronavirus-tip {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .coronavirus-tip image {
    width: 50rpx;
    height: 50rpx;
    display: block;
    padding-bottom: 20rpx;
  }
}

// 挂号体检
.bodyCheck {
  display: flex;
  justify-content: space-between;
  padding: 0 10rpx;

  .bodycheck-item {
    position: relative;
    width: 48%;
    height: 200rpx;
    border-radius: 20rpx;

    &:nth-of-type(1) {
      background-image: linear-gradient(to right, #d7dfff 10%, #5a9fff 100%);

      .body-checktitle {
        color: #0042ff;
      }
    }

    &:nth-of-type(2) {
      background-image: linear-gradient(to right, #ffdbb4 10%, #ffc56b 100%);

      .body-checktitle {
        color: #dc6200;
      }
    }

    text {
      position: absolute;

      &:nth-of-type(1) {
        top: 15rpx;
        left: 20rpx;
        font-size: 40rpx;
      }

      &:nth-of-type(2) {
        top: 80rpx;
        left: 20rpx;
        font-size: 30rpx;
        color: #fff
      }
    }

  }

  image {
    position: absolute;
    width: 150rpx;
    height: 150rpx;
    display: block;
    bottom: 0;
    right: 20rpx;
  }
}

//热门挂号
.online-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40rpx 10rpx 10rpx 10rpx;
  font-weight: bold;

  .online-title {
    font-size: 35rpx;
  }

  .online-more {
    display: flex;
    align-items: center;

    image {
      width: 40rpx;
      height: 40rpx;
      display: block;
      margin-left: 10rpx;
    }
  }
}

.online-items {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin: 10rpx 0;

  .online-item {
    display: flex;
    justify-content: space-between;
    width: calc(33% - 30rpx*2); //除去内外边距
    margin: 10rpx;
    padding: 20rpx;
    border-radius: 10rpx;
    align-items: center;

    image {
      width: 50rpx;
      height: 70rpx;
    }
  }
}

//健康自测
.self_test {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;

  .test {
    display: flex;
    justify-content: space-between;
    height: 200rpx;
    margin: 10rpx 10rpx;
    padding: 0rpx 10rpx;
    border-radius: 20rpx;
    box-shadow: 0 0 20rpx 10rpx #f7f7f7;

    .top {
      margin: 20px 0rpx;
    }

    image {
      width: 200rpx;
      display: block;
      height: 200rpx;
    }

    .title {
      display: block;
      font-size: 30rpx;
      margin-bottom: 10rpx;
    }



    .people {
      color: #a6abb0;
      font-size: 20rpx;

      .num {
        font-size: 25rpx;
        color: black
      }
    }

    .label {
      font-size: 25rpx;
      color: #a6abb0
    }
  }

  .testTipone {
    image {
      width: 250rpx;
    }
  }

  .bodyOthertest {
    display: flex;
    justify-content: space-between;

    .testTip {
      width: calc(50% - 20rpx*2);

      image {
        width: 120rpx;
      }
    }

  }
}
</style>